<template>
    <div class="price-box">
        <div class="price-group" v-for="item in cards" :key="item.label">
            <div class="price-header">
                <span class="price-icon" :style="{backgroundColor: item.color}"></span>
                <span>{{ item.label }}</span>
            </div>
            <span class="price-value">
                {{ formatValue(item.value) }}
                <span>{{ item.unit }}</span>
            </span>
        </div>
    </div>
</template>

<script>
export default {
    name: 'StatisticsCards',
    props: {
        // 统计卡片数据
        cards: {
            type: Array,
            default: () => [
                {
                    color: '#1EC7FF',
                    label: '总用电量',
                    value: 0,
                    unit: 'KW',
                },
                {
                    color: '#13C998',
                    label: '去年同期用电量',
                    value: 0,
                    unit: 'KW',
                },
                {
                    color: '#907CFF',
                    label: '同比增长率',
                    value: 0,
                    unit: '%',
                }
            ]
        },
        // 数值格式化配置
        valueFormat: {
            type: Object,
            default: () => ({
                decimals: 4, // 小数位数
                showThousandsSeparator: false // 是否显示千分位分隔符
            })
        }
    },
    methods: {
        // 格式化数值显示
        formatValue(value) {
            if (value === null || value === undefined) {
                return '0'
            }

            const num = Number(value)
            if (isNaN(num)) {
                return '0'
            }

            // 根据配置格式化数值
            let formattedValue = num.toFixed(this.valueFormat.decimals)

            // 添加千分位分隔符
            if (this.valueFormat.showThousandsSeparator) {
                formattedValue = this.addThousandsSeparator(formattedValue)
            }

            return formattedValue
        },

        // 添加千分位分隔符
        addThousandsSeparator(value) {
            const parts = value.toString().split('.')
            parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
            return parts.join('.')
        }
    }
}
</script>

<style lang="scss" scoped>
.price-box {
    display: flex;
    flex-direction: row;
    padding: 0 24px 16px 24px;

    .price-group {
        padding: 12px 16px;
        border: 1px solid #DCDFE6;
        flex: 1;

        .price-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 15px;
            font-size: 14px;
            font-weight: bold;
            color: #333;

            .price-icon {
                width: 4px;
                height: 16px;
            }

        }

        .price-value {
            font-size: 18px;
            font-weight: bold;
            color: #333;

            > span {
                font-size: 12px !important; // 设置为浏览器允许的最小值
                transform: scale(0.83); // 通过缩放实现视觉上的10px (12*0.83≈10)
                display: inline-block; // transform必须的显示模式
                transform-origin: left center; // 根据需求调整缩放基准点
            }
        }

    }

    .price-group:not(:last-child) {
        border-right: none;
    }
}
</style>
